<template>
  <div class="footer-wrapper">
    <div class="footer-content clear-fix">
      <div class="footer-left">
        <div class="foot-nav clear-fix">
            <a href="javascript:;" @click="goto('index')">首页</a>
            <a href="javascript:;" @click="goto('service-introdution')">项目服务</a>
            <a href="javascript:;" @click="goto('develop-introdution')">软件研发</a>
            <a href="javascript:;" @click="goto('college-intro')">国科教育</a>
            <a href="javascript:;" @click="goto('about-goktech')">关于国科</a>
            <a href="javascript:;" @click="goto('jobs-college')">诚聘英才</a>
            <a href="http://www.jikeserv.com/" target="_blank">集客服务</a>
            <a href="http://job.goktech.cn/" target="_blank">国科就业</a>
        </div>
        <div class="contact-way clear-fix">
          <span>电话：0592-6285229</span>
          <span><a href="mailto:hr@goktech.cn">邮箱：hr@goktech.cn</a></span>
        </div>
        <p class="Copyright"><a href="https://beian.miit.gov.cn" target="_blank">Copyright&copy; 福建国科信息科技有限公司 版权所有 闽ICP备15016628号-1</a></p>
      </div>
      <div class="footer-right clear-fix">
          <div class="QR-item">
              <h3 class="title">国科微信公众号</h3>
              <img class="QR-img" src="/img/home/official-code.png" alt="">
          </div>
          <div class="QR-item">
              <h3 class="title">国科新浪官方微博</h3>
              <img class="QR-img" src="/img/home/wibo-code.png" alt="">
          </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
 
  methods: {
    goto (routeName){
      this.$router.push({
          name: routeName
      })
    }
  }
}
</script>

<style lang="stylus" scoped>
// @import '~style/reset.styl';
  .footer-wrapper{
    width: 100%;
    padding: 80px 0;
    background:rgba(30,30,30,1);
    .footer-content{
      // @extend .clear-fix;
      width: 1200px;
      margin: auto;
      color:rgba(245,245,245,1);
      > div{
        float: left;
      }

      .footer-left{
        width: 670px;
        .foot-nav{
            // @extend .clear-fix;
            a{
                float: left;
                font-size: 14px;
                line-height: 14px;
                color: #828282;
                text-decoration: none;
                &:hover{
                    color: #fff;
                }
            }
            a + a{
              margin-left: 30px;
            }
        }

        .contact-way{
          // @extend .clear-fix;
          margin-top: 80px;
          display:flex;
          justify-content:space-between
          span{
            float: left;
            width: 224px;
            height: 44px;
            background-color: #1457FD;
            text-align: center;
            font-family:MicrosoftYaHei-Bold;
            font-weight:bold;
            color: #fff;
            font-size: 16px;
            line-height: 44px;
          }
          span + span{
            margin-left: 140px;
          }
          a{
            color: #fff !important
          }
        }

        .Copyright{
          margin-top: 80px;
          font-size: 12px;
          color: #828282;
        }
        .Copyright a{
          color: #828282;
        }
      }

      .footer-right{
        // @extend .clear-fix;
        margin-left: 80px;
        > div{
          float: left;

          .title{
            font-size: 16px;
            color:rgba(245,245,245,1);
            line-height: 16px;
            font-weight: normal;
          }

          img{
            width: 195px;
            height: 195px;
            margin-top: 20px;
          }
        }

        .QR-item + .QR-item{
          margin-left: 60px;
        }
      }

    }
  }
</style>
